<!-- 顺风车订单列表 -->
<template>
  <div class="sfc-order-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
          <el-form-item>
            <el-row type="flex">
              <el-select v-model="dg.ps.timeType" placeholder="时间类型" style="width: 100px; margin-right: 2px;">
                <el-option label="开始时间" :value="0"></el-option>
                <el-option label="添加时间" :value="1"></el-option>
                <el-option label="续团时间" :value="2"></el-option>
              </el-select>

              <el-date-picker v-model="dg.ps.setime" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" style="width: 200px" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.toAscDesc" placeholder="出行日期排序" style="width: 75px;">
              <el-option label="升序" value="ASC"></el-option>
              <el-option label="降序" value="DESC"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input clearable v-model="dg.ps.find" placeholder="行程详情/备注/订单号/航班号" style="width: 200px;">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="dg.ps.carSeats" placeholder="座位数" style="width: 80px;">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="dg.ps.customers" placeholder="人数" style="width: 80px;">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.isShuttle" placeholder="接送类型" style="width: 75px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="接" :value="0"></el-option>
              <el-option label="送" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select clearable v-model="dg.ps.sLonlat" :multiple="false" collapse-tags placeholder="接站点"
              style="width: 140px;">
              <el-option v-for="o in stationList" :key="o.id" :label="o.name" :value="o.lnglat">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select clearable v-model="dg.ps.eLonlat" :multiple="false" collapse-tags placeholder="送站点"
              style="width: 140px;">
              <el-option v-for="o in stationList" :key="o.id" :label="o.name" :value="o.lnglat">
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item>
            <el-select 
              v-model="dg.ps.isGrab" 
              placeholder="抢单状态"
              style="width: 100px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="未抢" :value="0"></el-option>
              <el-option label="已抢" :value="1"></el-option>
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item>
            <el-select 
              v-model="dg.ps.payWay" 
              multiple collapse-tags
              placeholder="支付方式"
              style="width: 140px;">
              <el-option 
                v-for="o in payWayArr" 
                :key="o.value"
                :label="o.label"
                :value="o.value">
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
        </el-form>
      </div>

      <TableSelfSet v-if="dg.columns.length > 0" :tbTitle="'顺风车订单列表'" :dgName="dg.dgName" :tbId="dg.tbName"
        :srcCols="dg.srcCols" :columns="dg.columns" @saveSet="saveTbSet" />
    </div>

    <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight" border fit :row-class-name="rowClassName"
      @header-dragend="dragHeader" @selection-change="selRowChange">
      <el-table-column fixed="left" type="selection" width="40"></el-table-column>
      <el-table-column fixed="left" label="操作" width="60">
        <template slot-scope="{row}">
          <el-button type="danger" @click="grabOrder(row)">抢单</el-button>
        </template>
      </el-table-column>
      <el-table-column v-for="(col, index) in dg.columns" :key="index" :class-name="dg.dgName" :prop="col.field"
        :label="col.label" :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'thanksFee'">
            {{ row.thanksFee > 0 ? row.thanksFee + '元' : '' }}
          </template>

          <span v-else-if="col.field == 'ensureMoney'">
            <span> {{ row.ensureMoney > 0 ? row.ensureMoney + '元' : '' }}</span>
          </span>

          <span v-else-if="col.field == 'regularCarMoney'">
            <span> {{ row.regularCarMoney > 0 ? row.regularCarMoney + '元' : '' }}</span>
          </span>

          <span v-else-if="col.field == 'seaddress'">
            <div class="c-green">起点：{{ row.spoint.address }}</div>
            <div class="c-blue">终点：{{ row.epoint.address }}</div>
          </span>

          <span v-else-if="col.field == 'cusAndSeats'">
            <span>{{ row.customers + '人' }}/{{ row.needSeats + '座' }}</span>
          </span>

          <span v-else-if="col.field == 'price'">
            <span>{{ (parseFloat(row.price) * parseFloat(dg.grabOrderRatio)).toFixed(2) }}元</span>
          </span>

          <span v-else-if="col.field == 'setime'">
            <div class="c-green">开始：{{ row.stime | time('yyyy年MM月dd号 HH:mm') }}</div>
            <div class="c-blue">结束：{{ row.etime | time('yyyy年MM月dd号 HH:mm') }}</div>
          </span>

          <span v-else-if="col.field == 'travelBox'">
            {{ row.travelBox > 0 ? row.travelBox + '个' : '' }}
          </span>

          <!-- <span v-else-if="col.field == 'payway'">
            <span v-for="o in payWayArr" :key="o.value">{{o.value == row.payway ? o.label : ''}}</span>
          </span> -->

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="dg.total > 0" :total="dg.total" :page.sync="dg.ps.page" :limit.sync="dg.ps.rows"
      @pagination="getDgList" />

  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';

import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';

import * as orderSer from '@/api/services/order.service';
import * as commonSer from '@/api/services/common.service';

export default {
  mixins: [DataGridBase, DataGridResize],
  directives: { elDragDialog },
  components: { TableSelfSet, Pagination },
  data() {
    let cols = [
      { label: '起点/终点', field: 'seaddress', width: 300 },
      { label: '人数/座位数', field: 'cusAndSeats', width: 100 },
      // {label: '已派车辆', field: 'plateNum', width: 85},
      { label: '抢单价格', field: 'price', width: 200 },
      // {label: '支付方式', field: 'payway', width: 90},
      { label: '感谢费', field: 'thanksFee', width: 80 },
      { label: '保障用车', field: 'ensureMoney', width: 120 },
      { label: '指定用车', field: 'regularCarMoney', width: 120 },
      { label: '航班号', field: 'routeStationInfo.num', width: 150 },
      { label: '开始/结束时间', field: 'setime', width: 180 },
      { label: '行程详情', field: 'routeDetail', width: 300 },
      { label: '行李数', field: 'travelBox', width: 60 },
      { label: '备注', field: 'cusNote', width: 250 },
      { label: '添加时间', field: 'addTime', width: 150 }
    ];
    return {
      dg: {
        dgName: 'dg',
        tbName: 'couponSetListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1, rows: 20,
          // 时间类型 0开始时间 1添加时间 2续团时间
          timeType: 0,
          // 出行起止时间
          setime: [],
          // 查询关键字 行程详情/备注/订单号
          find: null,
          // 座位数
          carSeats: null,
          // 人数
          customers: null,
          // 接送类型 0-接 1-送
          isShuttle: '',
          // 接站点
          sLonlat: null,
          // 送站点
          eLonlat: null,
          // 抢单状态 1已抢 0可抢
          // isGrab: '',
          // 支付方式 默认全部
          // payWay: null,
          // 出发时间排序 ASC-升序 DESC-降序
          toAscDesc: 'DESC'
        },

        // 抢单价格比例
        grabOrderRatio: 1,
      },

      // 站点列表
      stationList: [],

      // // 支付方式
      // payWayArr: [
      //   {value: 'JZ_PAY', label: '记账'},
      //   {value: 'CASH_PAY', label: '现金'},
      //   {value: 'WX_PAY', label: '微信'},
      //   {value: 'ALI_PAY', label: '支付宝'},
      //   {value: 'BALANCE_PAY', label: '余额'},
      //   {value: 'MONTH_PAY', label: '月结'},
      // ],

    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();

    that.getStationList();
  },
  methods: {
    // 获取-表格列表
    getDgList() {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);

      // 处理参数
      ps.sTime = ps.setime?.length == 2 ? ps.setime[0] : '';
      ps.eTime = ps.setime?.length == 2 ? ps.setime[1] : '';
      delete ps.setime;

      orderSer.getSfcOrderPageList(ps).then(res => {
        if (res.code == 1) {
          let list = res.data;
          for (let i in list) { list[i].dgName = dg.dgName; }

          dg.list = list;
          dg.total = res.count;

          // 设置抢单价格比例
          dg.grabOrderRatio = res.grabOrderRatio;
        }
      });
    },

    /**
     * 获取-接送机站点列表
     */
    getStationList() {
      const that = this;

      commonSer.getStationList({}).then(res => {
        if (res && res.code == 1) {
          let list = res.data;

          list.forEach(it => {
            that.stationList.push({
              id: it.id,                    // id
              type: it.type,                // 类型 1-飞机 2-火车
              isSta: true,                  // 是否是站点地点
              lnglat: it.mapPoint.lngLat,   // 坐标
              area: it.county,              // 区域
              name: it.name,                // 地点简写
              address: it.mapPoint.address, // 地址
              note: it.nameNote             // 站点别名
            });
          });
        }
      });
    },

    // 抢单
    grabOrder(o) {
      let that = this, U = that.U;

      U.qconfim(`确定抢单吗？`).then(r => {
        if (r) {
          orderSer.confirmGrabOrder({ ids: o.id }).then(res => {
            if (res.code !== 1) {
              U.qerror(res.msg);
            } else {
              U.qsuccess(res.msg);

              // 刷新订单列表
              that.getDgList();
            }
          });
        }
      });
    },

  },
}
</script>
